{% extends 'application.html' %}
{% block content %}
{% include '_nav.html'%}
<div id="highshow" style="min-width:400px; height:400px; margin: 0 auto;"></div>
{% endblock %}
{% block js %}
<script src="/static/js/highcharts.js"></script>
<script type="text/javascript">
var site = '{{site.id}}';
var nid = '{{nid}}';
var site_name = '{{site.name}}';
var subsay ="{{site.domain}}在节点#{{nid}}的统计";
$(function () {
    var options = ({
        chart : {
            renderTo: 'highshow'
        },
        title: {
            text : '最近4小时流量'
        },
        subtitle: {
            text: subsay
        },
        xAxis: {
            title: {
                text: '时间'
            },
            categories: [   '00:00','01:00','02:00','03:00','04:00',
                            '05:00','06:00','07:00','08:00','09:00',
                            '10:00','11:00','12:00','13:00','14:00',
                            '15:00','16:00','17:00','18:00','19:00',
                            '20:00','21:00','22:00','23:00'
                        ]
        },
        yAxis: {
            title: {
                text: 'MB'
            }
        },
        series:[
            {
                name: '',
                data: []
            }
        ]
    });
    var chart = new Highcharts.Chart(options);
    $(document).ready(function() {
        $.post("/site/"+site+"/"+nid+"/traffic",
        {
            type: 2
        },
        function(data,status)
        {
            if(data.status){
                options.xAxis.categories = data.time;
                options.series = [
                    {
                        name: 'HIT BYTE',
                        data: data.hit_byte
                    },
                    {
                        name: 'TOTAL BYTE',
                        data: data.total_byte
                    }
                ]
                chart = new Highcharts.Chart(options);
            }
            else
            {
                $._show_error(data.msg);
            }
        });
    });
});
</script>
{% endblock %}
